<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <h2>易行邮</h2>
                <p class="subtitle">仓库收货系统</p>
            </div>
            <div class="login-card">
                <form @submit.prevent="handleSubmit" class="login-form">
                    <div class="form-group">
                        <label>登录账号</label>
                        <div class="input-wrapper">
                            <i class="fas fa-envelope"></i>
                            <input type="text" v-model="model.account" placeholder="请输入邮箱/手机号码" required
                                :disabled="loading" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label>登录密码</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" v-model="model.password" placeholder="请输入密码" required
                                :disabled="loading" />
                        </div>
                    </div>
                    <button type="submit" :disabled="loading" class="submit-btn">
                        <i class="fas fa-sign-in-alt"></i>
                        {{ loading ? "登录中..." : "登录" }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import http from "../common/http";
import { setToken } from "../store";
import { message } from "@tauri-apps/plugin-dialog";
import router from "../router";

const emit = defineEmits(["login-success"]);
const loading = ref(false);

const model = reactive<{
    account: string;
    password: string;
}>({
    account: "",
    password: "",
});

async function handleSubmit() {
    if (!model.account || !model.password) {
        await message("请输入登录账号（电子邮箱/手机号码）和密码", { title: "提示", kind: "error" });
        return;
    }

    try {
        loading.value = true;

        const res = await http.post("passport/authenticate-a", {
            account: model.account,
            password: model.password,
        });

        if (res.data.code === 0) {
            setToken(res.data.data.access_token);

            await router.push('/index');
        } else {
            await message(res.data.msg, { title: "提示", kind: "error" });
        }
    } catch (error) {
        await message(error.message, { title: "提示", kind: "error" });
        await message("登录失败，请重试", { title: "提示", kind: "error" });
    } finally {
        loading.value = false;
    }
}
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-box {
    width: 100%;
    max-width: 420px;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.logo {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.login-header h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin: 0;
}

.subtitle {
    color: #666;
    margin-top: 0.5rem;
}

.login-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 1rem;
    color: #999;
}

input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

input:focus {
    border-color: #2979ff;
    box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.1);
    outline: none;
}

.submit-btn {
    background: linear-gradient(135deg, #2979ff 0%, #1565c0 100%);
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(41, 121, 255, 0.2);
}

.submit-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    .login-container {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%);
    }

    .login-header h2 {
        color: #fff;
    }

    .subtitle {
        color: #999;
    }

    .login-card {
        background-color: #2a2a2a;
    }

    .form-group label {
        color: #999;
    }

    input {
        background-color: #333;
        border-color: #444;
        color: white;
    }

    input:focus {
        border-color: #2979ff;
        box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
    }

    .input-wrapper i {
        color: #777;
    }
}
</style>
